<template>
  <div class="wrapper">
    <use-header title="分类设置" :tab-list="categoryType" v-model:active-key="state.activeKey" @change="tabChange"/>
    <a-card>
      <a-flex class="margin-bottom" justify="space-between" align="center">
        <a-space align="center">
          <span class="card-title">{{state.label}}分类</span>
          <a-tag :bordered="false">{{store.data.length}}</a-tag>
        </a-space>
        <a-space>
          <a-button type="primary" @click="showModal"><plus-outlined/>新建</a-button>
          <a-dropdown>
            <a-button>批量<down-outlined class="ant-icon-down"/></a-button>
            <template #overlay>
              <a-menu @click="handleBatch">
                <a-menu-item key="on">启用</a-menu-item>
                <a-menu-item key="off">禁用</a-menu-item>
                <a-menu-item key="del">删除</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>

          <a-divider type="vertical"/>
          <a-input-search name="name"
                          autocomplete="on"
                          v-model:value="store.searchValue"
                          @search="store.onSearch"
                          allow-clear placeholder="输入关键字搜索"/>
          <a-tooltip title="刷新">
            <a-button class="icon-only"><reload-outlined /></a-button>
          </a-tooltip>
        </a-space>
      </a-flex>
      <use-table :columns="columns"
                 row-key="id"
                 :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: selectChange}"
                 :data-source="store.data">
        <template #bodyCell="{column, record}">
          <template v-if="column.key === 'type'">
            <a-tag>{{getCategoryLabel(record.type)}}</a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag color="green" v-if="record.status">正常</a-tag>
            <a-tag v-else color="red">禁用</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <div class="table-action">
              <span @click="showModal(record)"><edit-outlined/>编辑</span>
              <span class="danger" @click="store.remove(record.id)"><delete-outlined/>删除</span>
            </div>
          </template>
        </template>
      </use-table>
    </a-card>
    <category-modal v-model:form-data="state.dataItem" v-model:open="state.open"/>
  </div>
</template>

<script setup lang="ts">
import UseHeader from "@/components/UseHeader.vue";
import {onMounted, reactive} from "vue";
import UseTable from "@/components/UseTable.vue";
import {PlusOutlined, ReloadOutlined, DownOutlined, EditOutlined, DeleteOutlined} from "@ant-design/icons-vue";
import {categoryType,getCategoryLabel} from "@/config/category.ts";
import CategoryModal from "@/views/admin/category/components/CategoryModal.vue";
import {useCategoryStore} from "@/store/modules/category.ts";
import type {MenuProps} from "ant-design-vue";
import useMessage from "@/utils/useMessage.ts";

const store = useCategoryStore()
const state = reactive({
  activeKey: categoryType[0]?.value as string,
  selectedRowKeys:[] as Key[],
  open:false,
  label:categoryType[0]?.label as string,
  dataItem: {} as Category | undefined
})
const columns = [
  {title: '名称', dataIndex: 'name', key: 'name'},
  {title: '所属模块', dataIndex: 'model', key: 'model', width: 100},
  {title: '状态', dataIndex: 'status', key: 'status',width: 100},
  {title: '操作', key: 'action', width:240,},
];
const showModal = (data?:Category)=>{
  state.dataItem = data
  state.open = true
}
const tabChange = (option:OptionsType) => {
  state.activeKey = option.value as string
  state.label = option.label
  store.getCategories(option.value as string)
}
const selectChange = (key:Key[]) => {
  state.selectedRowKeys = key
}
onMounted(async ()=> {
  await store.getList()
  store.getCategories(state.activeKey)
})
const handleBatch:MenuProps['onClick'] = menu => {
  if ( state.selectedRowKeys.length === 0){
    useMessage(500,'请选择要操作的分类')
    return false
  }
  if (menu.key === 'del'){
    store.batchRemove(state.selectedRowKeys)
  }else {
    store.batchUpdate(state.selectedRowKeys,{status:menu.key === 'on' ? 1 : 0})
  }
}
</script>

<style scoped>

</style>